<!--<!DOCTYPE html>-->
<!--<html lang="en">-->
<!--<head>-->
<!--    <meta charset="UTF-8">-->
<!--    <title>Cars</title>-->
<!--    <style>-->
<!--        body {-->
<!--            margin: 0;-->
<!--            padding: 0;-->
<!--        }-->
<!--        .u1 {-->
<!--            list-style-type: none;-->
<!--            line-height: 60px;-->
<!--        }-->
<!--        .l2 {-->
<!--            float: left;-->
<!--            margin: auto 30px;-->
<!--            font-size: 20px-->
<!--        }-->
<!--        a {-->
<!--            text-decoration: none;-->
<!--            color: rgba(255, 255, 255, 0.7)-->
<!--        }-->
<!--        a:hover {-->
<!--            color: white-->
<!--        }-->
<!--        #d1{-->
<!--            position: absolute;-->
<!--            float: right;-->
<!--            right: 16%;-->
<!--            top: 320px;-->
<!--        }-->
<!--        .main{-->
<!--            width: 300px;-->
<!--            height: 300px;-->
<!--        }-->
<!--        .item{-->
<!--            position: relative;-->
<!--            width: 220px;-->
<!--            height: 220px;-->
<!--            margin: 10px;-->
<!--            border-radius: 50%;-->
<!--            box-shadow: inset 0 0 0 16px rgba(255,255,255,.6),0 1px 2px rgba(0,0,0,.1);-->
<!--            transition: all .4s ease-in-out;-->
<!--        }-->
<!--        .info{-->
<!--            opacity: 0;-->
<!--            transform: scale(0);-->
<!--            position: absolute;-->
<!--            width: 100%;-->
<!--            height: 100%;-->
<!--            background:rgba(000,000,000,.8);-->
<!--            border-radius: 50%;-->
<!--            text-align: center;-->
<!--            transition: all .4s ease-in-out;-->
<!--        }-->
<!--        .info h3{-->
<!--            height: 80px;-->
<!--            font-size: 22px;-->
<!--            color: #fff;-->
<!--            margin: 0 30px;-->
<!--            padding-top: 45px;-->
<!--            text-transform: uppercase;-->
<!--        }-->
<!--        .info p{-->
<!--            opacity: 0;-->
<!--            font-size: 12px;-->
<!--            color: #ffffff;-->
<!--            font-style: italic;-->
<!--            margin: 0 30px;-->
<!--            padding-top: 10px;-->
<!--            border-top: 1px solid rgba(255,255,255,.5);-->
<!--            transition: all .4s ease-in-out .4s;-->
<!--        }-->
<!--        .info a{-->
<!--            display: block;-->
<!--            color: #ffffff;-->
<!--            font-style: normal;-->
<!--        }-->
<!--        .item:hover{-->
<!--            box-shadow: inset 0 0 0 1px rgba(255,255,255,.1),0 1px 2px rgba(0,0,0,.1);-->
<!--        }-->
<!--        .item:hover .info{-->
<!--            opacity: 1;-->
<!--            transform: scale(1);-->
<!--        }-->
<!--        .item:hover .info p{-->
<!--            opacity: 1;-->
<!--        }-->
<!--        .info p a:hover{-->
<!--            color: #fff222;-->
<!--        }-->
<!--        #emo1{-->
<!--            background-image: url("../static/卡驰(黄).png");-->
<!--            background-size: 75%;-->
<!--            background-repeat: no-repeat;-->
<!--            background-position:center;-->
<!--        }-->
<!--        #a1{-->
<!--            position: absolute;-->
<!--            left: 25%;-->
<!--            top: 57%;-->
<!--            transform: translate(-50%,-50%);-->
<!--            font-size: 24px;-->
<!--            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);-->
<!--            background-size: 400%;-->
<!--            width: 150px;-->
<!--            height: 50px;-->
<!--            line-height: 50px;-->
<!--            text-align: center;-->
<!--            color: white;-->
<!--            text-transform: uppercase;-->
<!--            border-radius: 50px;-->
<!--            z-index: 1;-->
<!--        }-->
<!--        #a1::before{-->
<!--            content:"";-->
<!--            position: absolute;-->
<!--            left: -5px;-->
<!--            right: -5px;-->
<!--            top: -5px;-->
<!--            bottom: -5px;-->
<!--            background: linear-gradient(90deg,#03a9f4,#f441a5,#ffeb3b,#03a9f4);-->
<!--            background-size: 400%;-->
<!--            border-radius: 50px;-->
<!--            filter: blur(20px);-->
<!--            z-index: -1;-->
<!--        }-->
<!--        #a1:hover::before{-->
<!--            animation: sun 8s infinite;-->
<!--        }-->
<!--        #a1:hover{-->
<!--            animation: sun 8s infinite;-->
<!--        }-->
<!--        @keyframes  sun{-->
<!--            100%{-->
<!--                background-position: -400% 0;-->
<!--            }-->
<!--        }-->
<!--        .main1{-->
<!--            width: 805px;-->
<!--            height: 320px;-->
<!--            margin: 150px auto;-->
<!--            overflow: hidden;-->
<!--            position: absolute;-->
<!--            left: 23.5%;-->
<!--            top: 48%;-->
<!--            z-index: 1;-->
<!--            list-style-type: none;-->
<!--        }-->
<!--        .l1{-->
<!--            width: 160px;-->
<!--            float: left;-->
<!--            position: relative;-->
<!--            transition: all 1s;-->
<!--            border-left: 1px solid #fff;-->
<!--        }-->
<!--        .flag{-->
<!--            position: absolute;-->
<!--            left: 0;-->
<!--            bottom: 0;-->
<!--            width: 100%;-->
<!--            height: 60px;-->
<!--            line-height: 60px;-->
<!--            text-align: center;-->
<!--            color: #fff;-->
<!--            background-color: rgba(0,0,0,0.5);-->
<!--        }-->
<!--        .main1:hover li{-->
<!--            width: 40px;-->
<!--        }-->
<!--        .main1 li:hover{-->
<!--            width: 640px;-->
<!--        }-->
<!--    </style>-->
<!--</head>-->
<!--<body>-->
<!--<ul class="main1">-->
<!--    <li class="l1"><a href=""><img src="../static/1.png" alt="" style="width: 640px">-->
<!--        <div class="flag">选车指南</div></a>-->
<!--    </li>-->
<!--    <li class="l1"><a href=""><img src="../static/2.png" alt="" style="width: 640px">-->
<!--        <div class="flag">车友论坛</div></a>-->
<!--    </li>-->
<!--    <li class="l1"><a href=""><img src="../static/3.png" alt="" style="width: 640px">-->
<!--        <div class="flag">越野指南</div></a>-->
<!--    </li>-->
<!--    <li class="l1"><a href=""><img src="../static/4.png" alt="" style="width: 640px">-->
<!--        <div class="flag">赛道指南</div></a>-->
<!--    </li>-->
<!--    <li class="l1"><a href="activity.html"><img src="../static/5.png" alt="" style="width: 640px">-->
<!--        <div class="flag">精彩活动</div></a>-->
<!--    </li>-->
<!--</ul>-->
<!--<a href="login.html" id="a1">加入我们</a>-->
<!--<a href="login.html" style="position: absolute;left: 32%;top: 55%;font-size: 24px;color: white">登录</a>-->
<!--<div id="d1">-->
<!--    <div class="main">-->
<!--        <div class="item" id="emo1">-->
<!--            <div class="info">-->
<!--                <h3>了解我们</h3>-->
<!--                <p>祝君一路顺风<a href="us.html">卡驰</a></p>-->
<!--            </div>-->
<!--        </div>-->
<!--    </div>-->
<!--</div>-->
<!--<div id="app" ; style="width: 100%;height: 100%;margin: 0;padding: 0">-->
<!--    <video src="../static/地平线壁纸.mp4"-->
<!--           loop muted autoplay-->
<!--           style="width: 100%;margin: 0;padding: 0;z-index: -1;position: absolute;"></video>-->
<!--    <div style="width: 100%;height: 131px;background: url('../static/渐变.png') repeat center top">-->
<!--        <div style="width: 100%;height: 60px;margin-bottom: 51px">-->
<!--            <span style="text-align: center;overflow: hidden;width: 800px">-->
<!--                    <ul class="u1" style="margin: 0;padding: 0;font-family:Microsoft YaHei sans-serif !important;">-->
<!--                        <li class="l2"><img src="../static/卡驰(黄).png" style="height: 60px"></li>-->
<!--                        <li class="l2"><a href="">选车指南</a></li>-->
<!--                        <li class="l2"><a href="">车友论坛</a></li>-->
<!--                        <li class="l2"><a href="">越野指南</a></li>-->
<!--                        <li class="l2"><a href="">赛道指南</a></li>-->
<!--                        <li class="l2"><a href="activity.html">精彩活动</a></li>-->
<!--                        <li class="l2"><a href=""><img src="../static/头像.png" style="height: 50px;margin: 10px 0 0 550px"></a></li>-->
<!--                        <li class="l2" style="margin: 0"><a href="">我的账号</a></li>-->
<!--                    </ul>-->
<!--            </span>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div style="width: 1200px;height: 820px;margin: 0 auto">-->
<!--        <div style="width: 100%;height: 400px">-->
<!--            <div style="width: 500px;height: 200px">-->
<!--                    <img src="../static/白75.PNG">-->
<!--                </div>-->
<!--            <div style="margin-left: 20px;width: 500px;height: 200px">-->
<!--                    <img src="../static/鸡汤(灰)%20(2).PNG">-->
<!--                </div>-->
<!--        </div>-->
<!--    </div>-->
<!--    <div style="width: 100%;height: 500px;background-color: black;overflow: hidden">-->
<!--        <div style="width:150px; margin: 20px auto"><img src="../static/卡驰(黄).png" style="width: 150px;margin: 0 auto"></div>-->
<!--        <div style="width: 700px;margin: 20px auto"><img src="../static/逼格.png" style="width: 700px"></div>-->
<!--    </div>-->
<!--</div>-->
<!--</body>-->
<!--</html>-->